<template>
  <div class="four-function" style="width: 70rem">
    <el-tabs v-model="activeName" type="card" stretch>
      <el-tab-pane label="关于我们" name="second"
        ><AboutUs></AboutUs
      ></el-tab-pane>
      <el-tab-pane
        :label="item.articleType"
        v-for="item in allArticle"
        :key="item.id"
        :name="item.articleType"
      >
        <CompanyDynamics
          :ArticleTypeId="item.id"
          v-if="item.articleType == '公司动态'"
        ></CompanyDynamics>

        <home-news :ArticleTypeId="item.id" v-else></home-news>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// 关于我们
import AboutUs from "../YYB/AboutUs.vue";
// 公司动态
import CompanyDynamics from "../YYB/CompanyDynamics.vue";
// 新闻时事
import HomeNews from "../YYB/HomeNews.vue";

import { getAllartType } from "../api/read";
export default {
  components: {
    HomeNews,
    CompanyDynamics,
    AboutUs,
  },
  data() {
    return {
      allArticle: [],
      activeName: "second",
    };
  },
  mounted() {
    this.getAllType();
  },
  methods: {
    //所有文章类型
    getAllType() {
      getAllartType()
        .then(({ data }) => {
          let arr = data.data;
          this.allArticle = arr;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
</style>